<template>
	<view class="container">
		<uni-card title="阀门开关任务" :is-shadow="true" margin="20rpx" class="full-height-card">
			<!-- 任务准备阶段 -->
			<uni-section title="1. 任务准备" type="line">
				<view class="form-group">
					<text class="form-label">阀门编号：</text>
					<uni-easyinput v-model="formData.valveId" placeholder="请输入阀门编号" />
				</view>
				<view class="form-group">
					<text class="form-label">操作类型：</text>
					<uni-data-checkbox v-model="formData.operationType" :localdata="operationTypes" />
				</view>
				<view class="form-group">
					<text class="form-label">计划时间：</text>
					<uni-datetime-picker v-model="formData.scheduledTime" type="datetime" />
				</view>
				<view class="form-group">
					<text class="form-label">风险预判：</text>
					<view class="risk-prediction">
						<uni-tag text="压力正常" type="success" />
						<uni-tag text="温度正常" type="success" />
					</view>
				</view>
				<view class="form-group">
					<text class="form-label">安全措施确认：</text>
					<uni-data-checkbox v-model="formData.safetyChecks" multiple :localdata="safetyOptions" />
				</view>
			</uni-section>

			<!-- 阀门操作阶段 -->
			<uni-section title="2. 阀门操作" type="line" v-if="showOperationStage">
				<view class="operation-stage">
					<button class="operation-button" :type="operationButtonType" @click="handleOperation">
						{{ operationButtonText }}
					</button>
					<uni-notice-bar v-if="operationLog" :text="operationLog" />
				</view>
			</uni-section>

			<!-- 操作后确认与收尾阶段 -->
			<uni-section title="3. 操作确认与收尾" type="line" v-if="showConfirmationStage">
				<view class="confirmation-stage">
					<button class="confirm-button" type="primary" @click="completeTask">确认完成</button>
					<uni-notice-bar v-if="operationResult" :text="operationResult" single color="#2979FF" background-color="#EAF2FF" />
				</view>
			</uni-section>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					valveId: '',
					operationType: 'open',
					scheduledTime: '',
					safetyChecks: []
				},
				operationTypes: [
					{ value: 'open', text: '开启阀门' },
					{ value: 'close', text: '关闭阀门' }
				],
				safetyOptions: [
					{ value: 'equipment', text: '穿戴防护装备' },
					{ value: 'isolation', text: '系统已隔离' }
				],
				showOperationStage: false,
				showConfirmationStage: false,
				operationLog: '',
				operationResult: '操作状态：操作成功',
				operationResultType: 'success'
			}
		},
		computed: {
			operationButtonText() {
				return this.formData.operationType === 'open' ? '开启阀门' : '关闭阀门';
			},
			operationButtonType() {
				return this.formData.operationType === 'open' ? 'primary' : 'warn';
			},
			canStartOperation() {
				return (
					this.formData.valveId &&
					this.formData.operationType &&
					this.formData.scheduledTime &&
					this.formData.safetyChecks.length === this.safetyOptions.length
				);
			}
		},
		watch: {
			formData: {
				handler() {
					this.showOperationStage = this.canStartOperation;
					if (!this.canStartOperation) {
						this.showConfirmationStage = false;
						this.operationLog = '';
					}
				},
				deep: true
			}
		},
		methods: {
			handleOperation() {
				this.operationLog = `操作中：${this.operationButtonText}...`;
				setTimeout(() => {
					this.operationLog = `操作完成：${this.operationButtonText}`;
					this.showConfirmationStage = true;
				}, 2000);
			},
			completeTask() {
				uni.showToast({ title: '任务已完成', icon: 'success' });
				this.resetForm();
			},
			resetForm() {
				this.formData = {
					valveId: '',
					operationType: 'open',
					scheduledTime: '',
					safetyChecks: []
				};
				this.showOperationStage = false;
				this.showConfirmationStage = false;
				this.operationLog = '';
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		height: 100%;
	}
	
	.container {
		padding-bottom: 0;
		min-height: 100vh;
	}
	
	.full-height-card {
		min-height: calc(100vh - 140rpx);
		margin-bottom: 0 !important;
		box-shadow: none !important;
		
		:deep(.uni-card__content) {
			padding-bottom: 50rpx;
		}
	}
	
	.card-content {
		padding: 10rpx 0;
	}
	
	.placeholder {
		height: 400rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.placeholder-text {
		font-size: 30rpx;
		color: #909399;
		margin-top: 30rpx;
	}
	
	.risk-prediction {
		display: flex;
		gap: 10rpx;
	}
	
	.operation-stage {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
	}
	
	.operation-button {
		width: 200rpx;
	}
	
	.confirmation-stage {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
	}
	
	.confirm-button {
		width: 200rpx;
	}
	
	.form-group {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.form-label {
		min-width: 160rpx;
		font-size: 30rpx;
		color: #333;
	}
</style> 